<style scoped lang="scss">
.mapWrapper {
  display: flex;
  height: 32px;
  justify-content: flex-start;
  align-items: flex-start;
  border-radius: 4px;
  background-color: #f7f7f7;
  margin:2px 0;
}
.labelWrapper {
  display: flex;
  height:32px;
  width:150px;
  justify-content: flex-end;
  align-items: center;
  padding: 0 5px;
  border: 1px solid #dcdee2;
  border-right:none;
  border-radius: 4px 0px 0px 4px;
  font-size: 14px;
  background-color: #f7f7f7;
}
.cellWrapper {
  flex:1 1 auto;
  min-height:30px;
  padding:2px 4px;
  border: 1px solid #dcdee2;
  background-color: #ffffff;
  //border-left: none;
  border-radius: 0 4px 4px 0;
}
.labelTip {
  height:100%;
}
.editor {
  height:100%;
  flex:1 1 auto;
  border: none;
  padding:0;
}
.mark {
  width:5px;
  height:32px;
  background-color: #2d8cf0;
  border-color: #2d8cf0;
  margin-right:2px;
  opacity: 0.6;
}
.action {
  width:20px;
  margin-right: 5px;
  margin-left:5px;
  cursor: pointer;
  line-height: 2;
  text-align: center;
}
</style>
<template>
  <div class="mapWrapper">
    <div v-if="mark" class="mark"></div>
    <Tooltip class="labelTip" placement="top" :content="tip" :disabled="!tip" transfer>
      <div class="labelWrapper" :style="labelStyle"><span>{{label}}</span></div>
    </Tooltip>
    <slot name="prepend"></slot>
    <Row class-name="cellWrapper" @click.native="$emit('select',editValue)">
      <Tag v-if="!!editValue.type">{{lang.type+editValue.type}}</Tag>
      <Tag v-if="!!editValue.className">{{lang.className+editValue.className}}</Tag>
      <Tag v-if="!!editValue.id">{{lang.id+editValue.id}}</Tag>
      <Tag v-if="!!editValue.category">{{lang.category+editValue.category}}</Tag>
      <Tag v-if="!!editValue.name">{{lang.name+editValue.name}}</Tag>
    </Row>
    <slot name="append"></slot>
    <div v-if="addField" class="action" @click="$emit('addField')">+</div>
    <div v-if="removeField" class="action" @click="$emit('removeField')">-</div>
  </div>
</template>
<script>
export default {
  name: "cfg-pointer",
  model: {
    prop: 'value',
    event: 'change'
  },
  data() {
    return {
      editValue:{}
    }
  },
  props:{
    value:{
      default:()=>{
        return {};
      }
    },
    labelStyle: {
      default: () => {
        return {};
      }
    },
    config: {
      default: () => {
        return {};
      }
    },
    label: {
      default: () => {
        return '';
      }
    },
    tip: {
      default: () => {
        return null;
      }
    },
    addField: {
      default: () => {
        return false;
      }
    },
    removeField: {
      default: () => {
        return false;
      }
    },
    mark:{
      default: () => {
        return true;
      }
    }
  },
  computed:{
    lang(){
      return {
        "en-US": {
          id:'id:',
          parentId:'parentId:',
          type:'type:',
          className:'className:',
          category:'category',
          name:'name:'
        },
        "zh-CN": {
          id:'唯一标识:',
          parentId:'上一级标识:',
          type:'类型:',
          className:'模型名称:',
          category:'分类',
          name:'名称:'
        },
      }[this.G_Locale];
    }
  },
  mounted() {
    this.editValue=this.value;
  },
  watch: {
    value:function(newVal){
      this.editValue=newVal;
    }
  },
  methods: {
    change(){
      this.$emit('change',this.editValue);

    }
  }
}
</script>

<style scoped>

</style>